<template>
  <div>
    <div class="pay_box">
      <div class="cost-button"  :class="{'cost_active':flog==1}"  @click="getActive(1)">门诊日志</div>
      <div class="cost-button"  :class="{'cost_active':flog==2}"  @click="getActive(2)">接诊类型统计</div>
      <div class="cost-button"  :class="{'cost_active':flog==3}"  @click="getActive(3)">医生接诊</div>
      <div class="cost-button"  :class="{'cost_active':flog==4}"  @click="getActive(4)">患者来源统计</div>
    </div>
    <comm :is="activeName"></comm>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName:'log',
      flog:1
    };
  },
  mounted() {
  },
  methods: {
    getActive(type){
      let th=this;
      th.flog=type;
      switch(type){
        case 1:
          th.activeName="log";
          break;
        case 2:
          th.activeName="type";
          break;  
        case 3:
          th.activeName="doctor";
          break;
        case 4:
          th.activeName="sources";
          break;  
      }
    }
  },
  components:{
    type:()=>import("../_medicalComm/type"),
    doctor:()=>import("../_medicalComm/doctor"),
    log:()=>import("../_medicalComm/log"),
    sources:()=>import("../_medicalComm/source"),
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin: 10px 0px;
  display: inline-block;
  width: 100%;
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.cost-button{
  display: inline-block;
  width: 120px;
  margin-right: 15px;
  text-align:center;
  border:1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  height: 34px;
  line-height: 32px;
}
.cost_active{
  border-color: #1AB394;
  color:#1AB394;
}
</style>